import React, { lazy, Suspense } from 'react';
import BlankLayout from '../layouts/BlankLayout';
import { Redirect} from 'react-router-dom';
const Home = lazy(() => import('../pages/home/Home'))
const Community = lazy(() => import('../pages/community/Community'))
const Match = lazy(() => import('../pages/match/Match'))
const Shopping = lazy(() => import('../pages/shopping/Shopping'))
const My = lazy(() => import('../pages/my/My'))
const Detail = lazy(() => import('../pages/detail/Detail'))
const Exhibition = lazy(() => import('../pages/exhibition/Exhibition'))
const ShoppingCart = lazy(() => import('../pages/shoppingcart/ShoppingCart'))
import Tabbuttom from '../components/tabbuttom/Tabbuttom'

//一种优化技术，用来加载异步组件。Suspense技术起初是为了加载异步组件
// ，但逐渐应用到了所有异步过程中。其中，异步请求是Suspense最主要的使用场景。
//类似图片的懒加载
const SuspenseComponent = Component => props => {
    return (
        <Suspense fallback={null}>
            <Component {...props}></Component>
        </Suspense>
    )
}

//react-router-config
export default[{
    component:BlankLayout,
    routes:[
        {
            path:'/',
            exact:true,
            render:()=><Redirect to={"/home/home"}/>,
        },
        {
            path:'/home',
            component:Tabbuttom,
            routes:[
                {
                    path:'/home/home',
                    component: SuspenseComponent(Home),
                },
                {
                    path:'/home/community',
                    component: SuspenseComponent(Community),
                },
                {
                    path:'/home/match',
                    
                    component: SuspenseComponent(Match),
                },
                {
                    path:'/home/shopping',
                    component: SuspenseComponent(Shopping),
                },
                {
                    path:'/home/my',       
                    component: SuspenseComponent(My),
                },
            ]
        },
        {
            path:'/detail',
            component:SuspenseComponent(Detail),
            routes:[
                {
                    path:'/detail/:id',
                    component:SuspenseComponent(Detail)
                }
            ]
        },
        {
            path:'/exhibition',
            component:SuspenseComponent(Exhibition),
            routes:[
                {
                    path:'/exhibition/:id',
                    component:SuspenseComponent(Exhibition)
                }
            ]
        },
        {
            path:'/shoppingcart',
            component:SuspenseComponent(ShoppingCart)
        }
    ]
}]